<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博物馆预约管理后台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .header {
            background: #fff;
            padding: 1rem 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-info {
            display: flex;
            align-items: center;
        }
        
        .header h1 {
            color: #2c3e50;
            font-size: 1.5rem;
        }
        
        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        
        .nav-tabs {
            display: flex;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }
        
        .nav-tab {
            flex: 1;
            padding: 1rem;
            text-align: center;
            background: #fff;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            color: #666;
            transition: all 0.3s ease;
        }
        
        .nav-tab.active {
            background: #3498db;
            color: #fff;
        }
        
        .nav-tab:hover:not(.active) {
            background: #f8f9fa;
            color: #333;
        }
        
        .tab-content {
            background: #fff;
            border-radius: 8px;
            padding: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            text-align: center;
        }
        
        .stat-card h3 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        
        .stat-card p {
            opacity: 0.9;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: #555;
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #3498db;
            color: #fff;
        }
        
        .btn-primary:hover {
            background: #2980b9;
        }
        
        .btn-success {
            background: #27ae60;
            color: #fff;
        }
        
        .btn-success:hover {
            background: #229954;
        }
        
        .btn-danger {
            background: #e74c3c;
            color: #fff;
        }
        
        .btn-danger:hover {
            background: #c0392b;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        
        .table th,
        .table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #555;
        }
        
        .table tr:hover {
            background: #f8f9fa;
        }
        
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .status-open {
            background: #d4edda;
            color: #155724;
        }
        
        .status-closed {
            background: #f8d7da;
            color: #721c24;
        }
        
        .loading {
            text-align: center;
            padding: 2rem;
            color: #666;
        }
        
        .alert {
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
        }
        
        .alert-success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .alert-error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }
        
        .modal-content {
            background: #fff;
            margin: 5% auto;
            padding: 2rem;
            width: 90%;
            max-width: 500px;
            border-radius: 8px;
            position: relative;
        }
        
        .close {
            position: absolute;
            right: 1rem;
            top: 1rem;
            font-size: 1.5rem;
            cursor: pointer;
            color: #999;
        }
        
        .close:hover {
            color: #333;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 0 0.5rem;
            }
            
            .nav-tabs {
                flex-direction: column;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .table {
                font-size: 0.875rem;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>🏛️ 博物馆预约管理后台</h1>
        <div class="header-info">
            <span id="adminInfo" style="margin-right: 1rem;"></span>
            <span id="currentDate" style="margin-right: 1rem;"></span>
            <button class="btn btn-danger" onclick="logout()" style="padding: 0.5rem 1rem;">退出登录</button>
        </div>
    </header>

    <div class="container">
        <!-- 导航标签 -->
        <div class="nav-tabs" id="navTabs">
            <button class="nav-tab active" onclick="showTab('dashboard')" data-permission="dashboard.view">仪表板</button>
            <button class="nav-tab" onclick="showTab('config')" data-permission="config.view">系统配置</button>
            <button class="nav-tab" onclick="showTab('schedule')" data-permission="schedule.view">开馆时间</button>
            <button class="nav-tab" onclick="showTab('timeslots')" data-permission="timeslots.view">时段管理</button>
            <button class="nav-tab" onclick="showTab('closures')" data-permission="closures.view">闭馆设置</button>
            <button class="nav-tab" onclick="showTab('reservations')" data-permission="reservations.view">预约管理</button>
            <button class="nav-tab" onclick="showTab('verification')" data-permission="verification.view">核验中心</button>
            <button class="nav-tab" onclick="showTab('admin')" data-permission="admin.view" style="display: none;">管理员</button>
            <button class="nav-tab" onclick="showTab('roles')" data-permission="roles.view" style="display: none;">角色管理</button>
            <button class="nav-tab" onclick="showTab('logs')" data-permission="logs.view" style="display: none;">系统日志</button>
        </div>

        <!-- 仪表板 -->
        <div id="dashboard" class="tab-content active">
            <h2>今日概览</h2>
            <div class="stats-grid" id="statsGrid">
                <div class="stat-card">
                    <h3 id="todayReserved">-</h3>
                    <p>今日预约</p>
                </div>
                <div class="stat-card">
                    <h3 id="todayCheckedIn">-</h3>
                    <p>已签到</p>
                </div>
                <div class="stat-card">
                    <h3 id="todayAvailable">-</h3>
                    <p>剩余名额</p>
                </div>
                <div class="stat-card">
                    <h3 id="museumStatus">-</h3>
                    <p>开馆状态</p>
                </div>
            </div>

            <h3>今日时段统计</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th>时段</th>
                        <th>时间</th>
                        <th>已预约</th>
                        <th>已签到</th>
                        <th>最大容量</th>
                        <th>剩余名额</th>
                    </tr>
                </thead>
                <tbody id="slotStatsTable">
                    <tr>
                        <td colspan="6" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 系统配置 -->
        <div id="config" class="tab-content">
            <h2>系统配置</h2>
            <div id="configAlert"></div>
            
            <div class="form-group">
                <label for="museumStatusSelect">博物馆开放状态</label>
                <select id="museumStatusSelect" class="form-control">
                    <option value="open">开馆</option>
                    <option value="closed">闭馆</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="advanceBookingDays">可提前预约天数</label>
                <input type="number" id="advanceBookingDays" class="form-control" min="1" max="30">
            </div>
            
            <div class="form-group">
                <label for="dailyMaxVisitors">每日最大访客数</label>
                <input type="number" id="dailyMaxVisitors" class="form-control" min="1">
            </div>
            
            <div class="form-group">
                <label for="slotMaxVisitors">每时段最大访客数</label>
                <input type="number" id="slotMaxVisitors" class="form-control" min="1">
            </div>
            
            <button class="btn btn-primary" onclick="saveConfig()">保存配置</button>
        </div>

        <!-- 开馆时间 -->
        <div id="schedule" class="tab-content">
            <h2>开馆时间设置</h2>
            <div id="scheduleAlert"></div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>星期</th>
                        <th>状态</th>
                        <th>开馆时间</th>
                        <th>闭馆时间</th>
                        <th>最大访客数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="scheduleTable">
                    <tr>
                        <td colspan="6" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 时段管理 -->
        <div id="timeslots" class="tab-content">
            <h2>时段管理</h2>
            <div id="timeslotsAlert"></div>
            
            <button class="btn btn-success" onclick="showAddTimeSlotModal()">添加时段</button>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>时段名称</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>最大人数</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="timeslotsTable">
                    <tr>
                        <td colspan="6" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 闭馆设置 -->
        <div id="closures" class="tab-content">
            <h2>特殊闭馆日期</h2>
            <div id="closuresAlert"></div>
            
            <button class="btn btn-success" onclick="showAddClosureModal()">添加闭馆日期</button>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>类型</th>
                        <th>原因</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="closuresTable">
                    <tr>
                        <td colspan="5" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 预约管理 -->
        <div id="reservations" class="tab-content">
            <h2>预约管理</h2>
            <div id="reservationsAlert"></div>
            
            <div style="margin-bottom: 1rem;">
                <input type="date" id="reservationDate" class="form-control" style="width: auto; display: inline-block; margin-right: 1rem;">
                <button class="btn btn-primary" onclick="loadReservations()">查询</button>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>预约码</th>
                        <th>参观者</th>
                        <th>人数</th>
                        <th>时段</th>
                        <th>状态</th>
                        <th>签到时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="reservationsTable">
                    <tr>
                        <td colspan="7" class="loading">选择日期查询预约</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 核验中心 -->
        <div id="verification" class="tab-content">
            <h2>预约核验</h2>
            <div id="verificationAlert"></div>
            
            <div class="form-group">
                <label for="verificationCode">预约码</label>
                <div style="display: flex; gap: 1rem;">
                    <input type="text" id="verificationCode" class="form-control" placeholder="请输入或扫描预约码" style="flex: 1;">
                    <button class="btn btn-primary" onclick="verifyReservation()">验证</button>
                    <button class="btn btn-success" onclick="checkInReservation()" id="checkInBtn" style="display: none;">签到</button>
                </div>
            </div>
            
            <div id="verificationResult" style="display: none; margin-top: 1rem; padding: 1rem; background: #f8f9fa; border-radius: 4px;">
                <!-- 验证结果显示区域 -->
            </div>
            
            <h3>最近签到记录</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th>签到时间</th>
                        <th>预约码</th>
                        <th>参观者</th>
                        <th>人数</th>
                        <th>时段</th>
                    </tr>
                </thead>
                <tbody id="recentCheckinsTable">
                    <tr>
                        <td colspan="5" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 管理员管理 -->
        <div id="admin" class="tab-content">
            <h2>管理员管理</h2>
            <div id="adminAlert"></div>
            
            <button class="btn btn-success" onclick="showAddAdminModal()" data-permission="admin.edit">添加管理员</button>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>最后登录</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="adminTable">
                    <tr>
                        <td colspan="7" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 角色管理 -->
        <div id="roles" class="tab-content">
            <h2>角色管理</h2>
            <div id="rolesAlert"></div>
            
            <button class="btn btn-success" onclick="showAddRoleModal()" data-permission="roles.edit">添加角色</button>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>角色名称</th>
                        <th>显示名称</th>
                        <th>描述</th>
                        <th>用户数量</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="rolesTable">
                    <tr>
                        <td colspan="6" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 系统日志 -->
        <div id="logs" class="tab-content">
            <h2>系统日志</h2>
            <div id="logsAlert"></div>
            
            <div style="margin-bottom: 1rem;">
                <select id="logType" class="form-control" style="width: auto; display: inline-block; margin-right: 1rem;">
                    <option value="login">登录日志</option>
                    <option value="operation">操作日志</option>
                </select>
                <button class="btn btn-primary" onclick="loadLogs()">查询</button>
            </div>
            
            <table class="table">
                <thead id="logsTableHead">
                    <tr>
                        <th>时间</th>
                        <th>用户</th>
                        <th>状态</th>
                        <th>IP地址</th>
                        <th>详情</th>
                    </tr>
                </thead>
                <tbody id="logsTable">
                    <tr>
                        <td colspan="5" class="loading">请选择日志类型查询</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 添加时段模态框 -->
    <div id="addTimeSlotModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addTimeSlotModal')">&times;</span>
            <h3>添加时段</h3>
            <div class="form-group">
                <label for="slotName">时段名称</label>
                <input type="text" id="slotName" class="form-control" placeholder="如：上午场">
            </div>
            <div class="form-group">
                <label for="startTime">开始时间</label>
                <input type="time" id="startTime" class="form-control">
            </div>
            <div class="form-group">
                <label for="endTime">结束时间</label>
                <input type="time" id="endTime" class="form-control">
            </div>
            <div class="form-group">
                <label for="maxVisitors">最大人数</label>
                <input type="number" id="maxVisitors" class="form-control" min="1" value="50">
            </div>
            <button class="btn btn-success" onclick="addTimeSlot()">添加</button>
            <button class="btn" onclick="closeModal('addTimeSlotModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加闭馆日期模态框 -->
    <div id="addClosureModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addClosureModal')">&times;</span>
            <h3>添加闭馆设置</h3>
            
            <div class="form-group">
                <label for="closureType">闭馆类型</label>
                <select id="closureType" class="form-control" onchange="toggleClosureFields()">
                    <option value="once">指定日期闭馆</option>
                    <option value="weekly">每周闭馆</option>
                    <option value="monthly">每月闭馆</option>
                    <option value="yearly">每年闭馆</option>
                    <option value="range">日期范围闭馆</option>
                </select>
            </div>
            
            <!-- 指定日期字段 -->
            <div class="form-group" id="singleDateGroup">
                <label for="closureDate">闭馆日期</label>
                <input type="date" id="closureDate" class="form-control">
            </div>
            
            <!-- 日期范围字段 -->
            <div class="form-group" id="dateRangeGroup" style="display: none;">
                <label for="startDate">开始日期</label>
                <input type="date" id="startDate" class="form-control" style="margin-bottom: 0.5rem;">
                <label for="endDate">结束日期</label>
                <input type="date" id="endDate" class="form-control">
            </div>
            
            <!-- 每周闭馆字段 -->
            <div class="form-group" id="weeklyGroup" style="display: none;">
                <label>每周闭馆日（可多选）</label>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;">
                    <label><input type="checkbox" name="weekdays" value="1"> 周一</label>
                    <label><input type="checkbox" name="weekdays" value="2"> 周二</label>
                    <label><input type="checkbox" name="weekdays" value="3"> 周三</label>
                    <label><input type="checkbox" name="weekdays" value="4"> 周四</label>
                    <label><input type="checkbox" name="weekdays" value="5"> 周五</label>
                    <label><input type="checkbox" name="weekdays" value="6"> 周六</label>
                    <label><input type="checkbox" name="weekdays" value="0"> 周日</label>
                </div>
            </div>
            
            <!-- 每月闭馆字段 -->
            <div class="form-group" id="monthlyGroup" style="display: none;">
                <label for="monthlyDay">每月闭馆日期</label>
                <select id="monthlyDay" class="form-control">
                    <option value="">选择日期</option>
                </select>
                <small>注：如果某月没有对应日期，则自动跳过</small>
            </div>
            
            <!-- 每年闭馆字段 -->
            <div class="form-group" id="yearlyGroup" style="display: none;">
                <label for="yearlyMonth">每年闭馆月份</label>
                <select id="yearlyMonth" class="form-control" style="margin-bottom: 0.5rem;">
                    <option value="">选择月份</option>
                    <option value="1">1月</option>
                    <option value="2">2月</option>
                    <option value="3">3月</option>
                    <option value="4">4月</option>
                    <option value="5">5月</option>
                    <option value="6">6月</option>
                    <option value="7">7月</option>
                    <option value="8">8月</option>
                    <option value="9">9月</option>
                    <option value="10">10月</option>
                    <option value="11">11月</option>
                    <option value="12">12月</option>
                </select>
                <label for="yearlyDay">日期</label>
                <select id="yearlyDay" class="form-control">
                    <option value="">选择日期</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="closureReason">闭馆原因</label>
                <input type="text" id="closureReason" class="form-control" placeholder="如：节假日、维护日等">
            </div>
            
            <button class="btn btn-success" onclick="addClosure()">添加</button>
            <button class="btn" onclick="closeModal('addClosureModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加管理员模态框 -->
    <div id="addAdminModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addAdminModal')">&times;</span>
            <h3>添加管理员</h3>
            <div class="form-group">
                <label for="adminUsername">用户名</label>
                <input type="text" id="adminUsername" class="form-control" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="adminPassword">密码</label>
                <input type="password" id="adminPassword" class="form-control" placeholder="密码">
            </div>
            <div class="form-group">
                <label for="adminRealName">真实姓名</label>
                <input type="text" id="adminRealName" class="form-control" placeholder="真实姓名">
            </div>
            <div class="form-group">
                <label for="adminEmail">邮箱</label>
                <input type="email" id="adminEmail" class="form-control" placeholder="邮箱">
            </div>
            <div class="form-group">
                <label for="adminRole">角色</label>
                <select id="adminRole" class="form-control">
                    <option value="">选择角色</option>
                </select>
            </div>
            <button class="btn btn-success" onclick="addAdmin()">添加</button>
            <button class="btn" onclick="closeModal('addAdminModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加角色模态框 -->
    <div id="addRoleModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addRoleModal')">&times;</span>
            <h3>添加角色</h3>
            <div class="form-group">
                <label for="roleName">角色名称</label>
                <input type="text" id="roleName" class="form-control" placeholder="角色英文名">
            </div>
            <div class="form-group">
                <label for="roleDisplayName">显示名称</label>
                <input type="text" id="roleDisplayName" class="form-control" placeholder="角色中文名">
            </div>
            <div class="form-group">
                <label for="roleDescription">描述</label>
                <textarea id="roleDescription" class="form-control" placeholder="角色描述"></textarea>
            </div>
            <div class="form-group">
                <label>权限设置</label>
                <div id="permissionsCheckbox" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 1rem;">
                    加载中...
                </div>
            </div>
            <button class="btn btn-success" onclick="addRole()">添加</button>
            <button class="btn" onclick="closeModal('addRoleModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <script src="admin.js"></script>
</body>
</html>